<template>
	<view class="m-company">
		<!-- 		<view class="test-bg">
			<image class="test-bg-img"
				src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7d57903c58f04c0c8f23cebe09943f89.jpg"
				mode="aspectFill"></image>
		</view> -->
		<view class="content-box">
			<!-- 			<view class="room-btn btn-style" @click="handleBtnClick('room')">舞姬房间
				<view class="red-point"></view>
			</view> -->
			<view class="develop-btn btn-style">
				<view class="btn-content flex-column-center-center">
					成长
					<view class="red-point"></view>
				</view>
				<view class="click-cover" @click="handleBtnClick('develop')"></view>

			</view>
			<!-- 			<view class="train-btn btn-style" @click="handleBtnClick('train')">训练室
				<view class="red-point"></view>
			</view> -->


			<view class="hook-btn btn-style">
				<view class="btn-content flex-column-center-center">
					秘书团
					<view class="red-point"></view>
				</view>
				<view class="click-cover" @click="handleBtnClick('secretary')"></view>
			</view>
			<view class="live-btn btn-style">
				<view class="btn-content flex-column-center-center">
					直播间
					<view class="red-point"></view>
				</view>
				<view class="click-cover" @click="handleBtnClick('live')"></view>
			</view>


			<view class="staff-btn btn-style">
				<view class="btn-content flex-column-center-center">
					公司员工
					<view class="red-point"></view>
				</view>
				<view class="click-cover" @click="handleBtnClick('staff')"></view>
			</view>

			<view class="title-info" @click="handleBtnClick('company')">
				<view class="company-level">Lv.{{companyData.level}}</view>
				<view class="company-name">{{companyData.companyName}}</view>
				<view class="bottom-line"></view>
			</view>


			<view class="hook-out-box" @click="handleBtnClick('hook')">
				<view class="red-point"></view>
				<view class="hook-out-box-content flex-column-start-center">
					<view class="hook-out-title flex-row-center-center">公司收益
						<view class="division-line">
							<view class="line-content"></view>
						</view>
					</view>
					<view class="hook-out-inner flex-column-start-center">
						<view class="hook-out-inner-item flex-row-center-center">
							<view class="inner-item-icon flex-row-end-center">
								<image class="inner-item-icon-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a20b1b4318784286bd7bc5a1eb2ec23e.png"
									mode="aspectFill"></image>
							</view>
							<view class="inner-item-text">80/秒</view>
						</view>
						<view class="hook-out-inner-item flex-row-center-center">
							<view class="inner-item-icon flex-row-end-center">
								<image class="inner-item-icon-img"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1f61d153a0444f659349ce5513da6b4b.png"
									mode="aspectFill"></image>
							</view>
							<view class="inner-item-text">6/秒</view>
						</view>

					</view>
				</view>
			</view>

			<view class="room-btn leave-btn" @click="handleBtnClick('leave')"
				:class="{'room-btn-active':roomBtnClicked}">
				<view class="room-btn-content flex-row-center-end">
					<image class="room-btn-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/24d2b141b733493fbd7c1f2b900d2fdd.png"
						mode="aspectFill"></image>
					<view class="room-text">大厅</view>
				</view>
				<view class="room-btn-line">
					<view class="room-btn-line-content"></view>
				</view>
				<image class="room-btn-fast-icon"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5732440ddf8642799d477ef01a56a872.png"
					mode="aspectFill"></image>
			</view>

		</view>

		<typeModal ref="typeModal" @result="handleModalResult"></typeModal>

	</view>
</template>

<script>
	import typeModal from './type-modal.vue'


	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				},

			},

		},
		components: {
			typeModal,
		},
		data() {
			return {
				roomBtnClicked: false,
				girlsRoomStroyId: "",
				jumpOutStoryId: "",
				companyData: {
					companyName: "杭州境由心动",
					updateCondition: "公司经验达到4280",
					totalExp: 4280,
					nowExp: 2511,
					level: 13,
				},

			}
		},

		mounted() {
			this.getProps()
		},
		methods: {
			getProps() {
				let paramsJson = this.paramsJson
				this.girlsRoomStroyId = paramsJson.girlsRoomStroyId && paramsJson.girlsRoomStroyId.default ? paramsJson
					.girlsRoomStroyId.default :
					this
					.girlsRoomStroyId

				this.jumpOutStoryId = paramsJson.jumpOutStoryId && paramsJson.jumpOutStoryId.default ? paramsJson
					.jumpOutStoryId.default :
					this
					.jumpOutStoryId
			},

			handleBtnClick(type) {
				console.log("当前点击的是", type);
				switch (type) {
					case 'room':
						if (this.girlsRoomStroyId) {
							this.$emit('getGameResult', this.girlsRoomStroyId)
						}
						break;
					case 'develop':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open(type, '学习技能')
						}
						break;
					case 'train':
						break;
					case 'hook':
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open(type, '公司收益')
						}
						break;
					case 'live':
						// 弹框
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open(type, '直播间')
						}

						break;
					case 'staff':
						// 弹框
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open(type, '公司员工')
						}
						break;
						// 暂时
					case 'secretary':
						// 弹框
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open('secretary', '秘书团')
						}

						break;
					case 'company':
						// 弹框
						if (this.$refs.typeModal) {
							this.$refs.typeModal.open(type, "", this.companyData)
						}

						break;
					case 'leave':
						this.roomBtnClicked = true
						setTimeout(() => {
							this.roomBtnClicked = false
						}, 500)

						if (this.jumpOutStoryId) {
							this.$emit("getGameResult", String(this.jumpOutStoryId))
						}
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-company {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 999999999999999;
		pointer-events: none;

		.test-bg {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			z-index: 1;

			.test-bg-img {
				width: 100%;
				height: 100%;
			}
		}

		.content-box {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			z-index: 2;
			width: 100%;
			height: 100%;

			.leave-btn {
				bottom: 200rpx;
			}

			.hook-out-box {
				position: absolute;
				right: 20rpx;
				top: 180rpx;
				width: 180rpx;
				height: 100rpx;
				z-index: 9;
				border-radius: 10rpx;
				box-sizing: border-box;
				box-shadow: inset 0rpx 0rpx 6rpx rgba(255, 255, 255, .8);
				padding: 5rpx;
				pointer-events: fill;

				.hook-out-box-content {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					background-color: rgba(255, 255, 255, .1);

					.hook-out-title {
						position: relative;
						width: 100%;
						height: 40rpx;
						font-size: 20rpx;
						line-height: 40rpx;
						text-align: center;
						color: #fff;

						.division-line {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 1rpx;
							box-sizing: border-box;
							padding: 0rpx 10rpx;

							.line-content {
								width: 100%;
								height: 100%;
								background-color: rgba(255, 255, 255, .3);
							}

						}
					}

					.hook-out-inner {
						flex: 1;
						width: 100%;

						.hook-out-inner-item {
							width: 100%;
							flex: 1;

							.inner-item-icon {
								// width: 25rpx;
								flex: 1;
								height: 25rpx;
								margin-right: 15rpx;

								.inner-item-icon-img {
									width: 25rpx;
									height: 25rpx;
								}
							}

							.inner-item-text {
								font-size: 20rpx;
								line-height: 20rpx;
								color: #fff;
								// flex: 1;
								width: 100rpx;

							}
						}
					}
				}
			}

			.title-info {
				position: absolute;
				left: 20rpx;
				top: 180rpx;
				height: 50rpx;
				z-index: 11;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-image: linear-gradient(to right, rgba(0, 0, 0, .8)0%, rgba(0, 0, 0, .6)60%, rgba(0, 0, 0, .4)80%, rgba(0, 0, 0, .0)100%);

				font-size: 20rpx;
				line-height: 20rpx;
				color: #fff;

				padding-left: 10rpx;
				padding-right: 10rpx;
				pointer-events: fill;

				.company-level {
					margin-right: 10rpx;
				}

				.bottom-line {
					position: absolute;
					left: 0rpx;
					bottom: 0rpx;
					width: 100%;
					height: 2rpx;
					background-image: linear-gradient(to right, rgba(255, 255, 255, .8)0%, rgba(255, 255, 255, .6)60%, rgba(255, 255, 255, .4)80%, rgba(255, 255, 255, .0)100%);
				}
			}

			.btn-style {
				position: absolute;
				width: 40rpx;
				min-height: 152rpx;
				font-size: 22rpx;
				line-height: 26rpx;
				color: #fff;
				font-weight: 700;
				text-align: center;

				vertical-align: middle;
				pointer-events: fill;

				.btn-content {
					width: 40rpx;
					min-height: 152rpx;
					padding: 20rpx 0rpx;
					// box-shadow: 0rpx 0rpx 2rpx rgba(2555, 255, 255, .6);
					clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 95%);
					background-color: rgba(0, 0, 0, .6);



					&::before {
						content: "";
						/* 伪元素内容为空 */
						position: absolute;
						/* 绝对定位 */
						top: 0;
						/* 顶部对齐 */
						left: 0;
						/* 左侧对齐 */
						right: 0;
						/* 右侧对齐 */
						bottom: 0;
						/* 底部对齐 */
						background-color: transparent;
						/* 背景透明 */
						/* 与主元素相同的裁剪路径 */
						// border: 1rpx solid #fff;
						box-shadow: inset 0rpx 0rpx 2rpx #fff;
						/* 设置边框 */
						z-index: -1;
						/* 使边框位于主元素下面 */
					}
				}


				.click-cover {
					position: absolute;
					top: 0rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 250%;
					height: 100%;
					z-index: 9;
					background-color: transparent;
				}







			}



			.develop-btn {
				bottom: 790rpx;
				left: 200rpx;
			}

			.train-btn {
				top: 500rpx;
				left: 600rpx;
			}

			.hook-btn {
				// bottom: 690rpx;
				// left: 570rpx;

				top: 500rpx;
				left: 600rpx;
			}

			.live-btn {
				// bottom: 690rpx;
				// left: 570rpx;
				left: 80rpx;
				top: 400rpx;
			}

			.staff-btn {
				bottom: 750rpx;
				left: 550rpx;
			}





		}

	}

	.red-point {
		position: absolute;
		right: 5rpx;
		top: 8rpx;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #e25850;
		z-index: 9;
		border: 1rpx solid rgba(2555, 255, 255, .6);

	}

	.item-img {
		width: 100%;
		height: 100%;
	}
</style>